<template>
  <div class="about">
    <el-table :data="shopList">
      <el-table-column label="编号" prop="id" width="50px"></el-table-column>
      <el-table-column label="商品名" prop="goodName"></el-table-column>
      <el-table-column label="商品价格" prop="price" width="100px"></el-table-column>
      <el-table-column label="商铺库存" prop="count" width="100px"></el-table-column>
      <el-table-column label="商品介绍" prop="info" :formatter="formatterInfo"></el-table-column>
      <el-table-column label="商品种类" prop="typeName"></el-table-column>
      <el-table-column label="所在商铺" prop="shop"></el-table-column>
      <el-table-column label="商铺状态" prop="status" :formatter="formatterStatus">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status===1">可用</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openWin(scope.row.id)">修改</el-button>
          <el-button type="danger" size="mini" @click="deleteRow(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopList: [],
      total: 0,
      page: 1,
      // pageSize:5,
      limit: 5
    }
  },
  computed: {
    offset() {
      return (this.page - 1) * this.limit
    }
  },
  methods: {
    getList(offset, limit) {
      this.$axios.get('http://192.168.162.100:3000/good2/path', {params: {offset, limit}}).then(({data}) => {
        this.shopList = data.rows,
          this.total = data.total
      })
    },
    formatterInfo(row) {
      let info=row.info;
      if (row.info.length>8){
        return info.substring(0,8)+'...'
      }else{
        return info
      }
    },
    openWin() {

    },
    deleteRow() {

    }
  },
  created() {
    this.getList()
  }
}
</script>

<style>


</style>
